<div th:fragment="html">

    <script>
        function imgAndInfoPageRegisterListeners(vue){
            var stock = vue.p.stock;
            $(".productNumberSetting").keyup(function(){
                var num= $(".productNumberSetting").val();
                num = parseInt(num);
                if(isNaN(num))
                    num= 1;
                if(num<=0)
                    num = 1;
                if(num>stock)
                    num = stock;
                $(".productNumberSetting").val(num);
            });

            $(".increaseNumber").click(function(){
                var num= $(".productNumberSetting").val();
                num++;
                if(num>stock)
                    num = stock;
                $(".productNumberSetting").val(num);
            });
            $(".decreaseNumber").click(function(){
                var num= $(".productNumberSetting").val();
                --num;
                if(num<=0)
                    num=1;
                $(".productNumberSetting").val(num);
            });

            $(".addCartButton").removeAttr("disabled");
            $(".addCartLink").click(function(){
                var url = "forecheckLogin";
                axios.get(url).then(function(response) {
                    if(0==response.data.code){
                        var pid = vue.p.id;
                        var num= $(".productNumberSetting").val();
                        var url =  "foreaddCart?pid="+pid+"&num="+num;
                        axios.get(url).then(function(response) {
                            var result = response.data;
                            if(0==result.code){
                                $(".addCartButton").html("已加入购物车");
                                $(".addCartButton").attr("disabled","disabled");
                                $(".addCartButton").css("background-color","lightgray")
                                $(".addCartButton").css("border-color","lightgray")
                                $(".addCartButton").css("color","black")
                            }
                        });
                    }
                    else{
                        $("#loginModal").modal('show');
                    }
                });
            });
            $(".buyLink").click(function(){
                var url = "forecheckLogin";
                axios.get(url).then(function(response) {
                    if(0==response.data.code){
                        var pid = vue.p.id;
                        var num= $(".productNumberSetting").val();
                        var url =  "forebuyone?pid="+pid+"&num="+num;
                        axios.get(url).then(function(response) {
                            var oiid = response.data;
                            location.href="buy?oiid="+oiid;
                        });
                    }
                    else{
                        $("#loginModal").modal('show');
                    }
                });
                return false;
            });

            $("button.loginSubmitButton").click(function(){
                var url =  "forelogin";
                if(0==vue.user.name.length){
                    $("span.errorMessage").html("请输入用户名");
                    $("div.loginErrorMessageDiv").css("visibility","visible");
                    return;
                }
                if(0==vue.user.password.length){
                    $("span.errorMessage").html("请输入密码");
                    $("div.loginErrorMessageDiv").css("visibility","visible");
                    return;
                }

                axios.post(url,vue.user).then(function(response) {
                    var result = response.data;
                    if(result.code==0){
                        location.href="product?pid="+vue.p.id;
                    }
                    else{
                        $("span.errorMessage").html(result.message);
                        $("div.loginErrorMessageDiv").css("visibility","visible");
                    }
                });
            });

            $("img.smallImage").mouseenter(function(){
                var bigImageURL = $(this).attr("bigImageURL");
                $("img.bigImg").attr("src",bigImageURL);
            });

            $("img.bigImg").load(
                function(){
                    $("img.smallImage").each(function(){
                        var bigImageURL = $(this).attr("bigImageURL");
                        img = new Image();
                        img.src = bigImageURL;

                        img.onload = function(){
                            $("div.img4load").append($(img));
                        };
                    });
                }
            );
        }

    </script>

    <div class="imgAndInfo">

        <div class="imgInimgAndInfo">
            <img v-if="firstProductImage!=null" :src="'img/productSingle/'+firstProductImage.id+'.jpg'" class="bigImg">
            <div class="smallImageDiv">
                <img v-for="pi in p.productSingleImages" :src="'img/productSingle_small/'+pi.id+'.jpg'" :bigImageURL="'img/productSingle/'+pi.id+'.jpg'" class="smallImage">
            </div>
            <div class="img4load hidden" ></div>
        </div>

        <div class="infoInimgAndInfo">

            <div class="productTitle">
                {{p.name}}
            </div>
            <div class="productSubTitle">
                {{p.subTitle}}
            </div>

            <div class="productPrice">
                <div class="juhuasuan">
                    <span class="juhuasuanBig" >聚划算</span>
                    <span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
                </div>

                <div class="productPriceDiv">
                    <div class="gouwujuanDiv"><img height="16px" src="img/site/gouwujuan.png">
                        <span> 全天猫实物商品通用</span>

                    </div>
                    <div class="originalDiv">
                        <span class="originalPriceDesc">价格</span>
                        <span class="originalPriceYuan">¥</span>
                        <span class="originalPrice">
                            {{p.originalPrice|formatMoneyFilter}}
                        </span>
                    </div>

                    <div class="promotionDiv">
                        <span class="promotionPriceDesc">促销价 </span>
                        <span class="promotionPriceYuan">¥</span>
                        <span class="promotionPrice">
                            {{p.promotePrice|formatMoneyFilter}}
                        </span>
                    </div>
                </div>
            </div>

            <div class="productSaleAndReviewNumber">
                <div>销量 <span class="redColor boldWord"> {{ p.saleCount }}</span></div>
                <div>累计评价 <span class="redColor boldWord"> {{ p.reviewCount }}</span></div>
            </div>
            <div class="productNumber">
                <span>数量</span>
                <span>
                    <span class="productNumberSettingSpan">
                    <input class="productNumberSetting" type="text" value="1">
                    </span>
                    <span class="arrow">
                        <a href="#nowhere" class="increaseNumber">
                        <span class="updown">
                                <img src="img/site/increase.png">
                        </span>
                        </a>

                        <span class="updownMiddle"> </span>
                        <a href="#nowhere"  class="decreaseNumber">
                        <span class="updown">
                                <img src="img/site/decrease.png">
                        </span>
                        </a>

                    </span>

                件</span>
                <span>库存{{p.stock}}件</span>
            </div>
            <div class="serviceCommitment">
                <span class="serviceCommitmentDesc">服务承诺</span>
                <span class="serviceCommitmentLink">
                    <a href="#nowhere">正品保证</a>
                    <a href="#nowhere">极速退款</a>
                    <a href="#nowhere">赠运费险</a>
                    <a href="#nowhere">七天无理由退换</a>
                </span>
            </div>

            <div class="buyDiv">
                <a class="buyLink" ><button class="buyButton" >立即购买</button></a>
                <a href="#nowhere" class="addCartLink"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
            </div>
        </div>

        <div style="clear:both"></div>

    </div>
</div>